<template>
  <div class="draw-container">
    <div class="header">
      <h2>用户抽奖次数管理</h2>
    </div>

    <div class="filter-box">
      <div style="display: flex; margin-top: 20px;">
        <el-input v-model="search" placeholder="搜索手机号" style="width: 300px; margin-right: 10px;"></el-input>
        <el-button type="primary" @click="getDrawList">搜索</el-button>
      </div>
    </div>

    <el-table :data="drawList" style="width: 100%; margin-top: 20px;" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="user_id" label="用户ID" align="center"></el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
      <el-table-column prop="user.nickname" label="昵称" align="center"></el-table-column>
      <el-table-column prop="user.remark" label="备注" align="center"></el-table-column>
      <el-table-column prop="daily_count" label="每日抽奖次数" align="center"></el-table-column>
      <el-table-column prop="total_count" label="总抽奖次数" align="center"></el-table-column>
      <el-table-column prop="last_date" label="最后抽奖日期" align="center"></el-table-column>
      <el-table-column prop="update_date" label="更新日期" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="editDrawCount(scope.row)">修改抽奖次数</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!-- 修改抽奖次数对话框 -->
    <el-dialog title="修改抽奖次数" :visible.sync="dialogVisible" width="400px">
      <el-form :model="drawForm" label-width="120px">
        <el-form-item label="用户ID">
          <el-input v-model="drawForm.user_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="drawForm.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="drawForm.user.nickname" disabled></el-input>
        </el-form-item>
        <el-form-item label="真实抽奖次数">
          <el-input v-model="drawForm.daily_count" type="number" min="0"></el-input>
        </el-form-item>
        <el-form-item label="总共抽奖次数(361可抽中实物)">
          <el-input v-model="drawForm.total_count" type="number" min="0"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDrawCount">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 假设我们有这些API可以调用
import { getDrawNumber as getDrawList,  setDrawNumber as updateDrawCount } from '../../../libs/api';

export default {
  name: 'DrawManagement',
  data() {
    return {
      drawList: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      search: '',
      dialogVisible: false,
      drawForm: {
        user_id: '',
        mobile: '',
        daily_count: 0,
        total_count: 0,
        user: {
          nickname: '',
          remark: ''
        }
      }
    };
  },
  created() {
    this.getDrawList();
  },
  methods: {
    // 获取抽奖次数列表
    getDrawList() {
      getDrawList({
        page: this.currentPage,
        mobile: this.search
      }).then(res => {
        this.drawList = res.data.data;
        this.total = res.data.total;
      });
    },

    // 编辑抽奖次数
    editDrawCount(row) {
      this.drawForm = { ...row };
      this.dialogVisible = true;
    },

    // 保存抽奖次数修改
    saveDrawCount() {
      updateDrawCount({
        user_id: this.drawForm.user_id,
        daily_count: this.drawForm.daily_count,
        total_count: this.drawForm.total_count
      }).then(res => {
        this.$message.success('修改成功');
        this.dialogVisible = false;
        this.getDrawList();
      }).catch(err => {
        this.$message.error('修改失败');
      });
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getDrawList();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDrawList();
    }
  }
};
</script>

<style scoped>
.draw-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-box {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>